<template>
  <div>

    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>销售管理</el-breadcrumb-item>
      <el-breadcrumb-item>销售列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider></el-divider>


    <el-form 
      @submit.native.prevent
      :inline="true" class="demo-form-inline">
      <el-form-item label="销售名称">
        <el-input v-model="name" @keyup.native.enter="search" placeholder="销售名称关键字"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
      </el-form-item>
    </el-form>
    <el-divider content-position="left">销售列表</el-divider>

  </div>
</template>

<script>
  import httpApi from '@/http'

  export default {
    data() {
      return {
        saleData: {   // 保存销售列表查询结果
          page: 1,     // 当前页
          pagesize: 3, // 每页条目数
          total: 0,    // 总条目数
          result: []   // 销售查询结果   
        },
        name: '',  // 关键字 
        keyword: ''
      }
    },

    methods: {

      /** 删除销售 */
      del(id){
        console.log('即将删除的销售ID:', id)
        // 发送http请求, 执行删除业务
        httpApi.saleApi.delete({id}).then(res=>{
          console.log('删除业务结果', res)
          // 更新列表
        })
      },

      /**根据关键字, 按照页码模糊查询销售列表 */
      listsalesByName(page){
        let params = {name:this.keyword, page,}
        httpApi.saleApi.queryAllByName(params).then(res=>{
          console.log('模糊查询结果', res)
          this.saleData = res.data.data
        })
      },

      /** 点击查询按钮 / 敲回车 时执行 */
      search(){
        this.keyword = this.name
        if(this.keyword.trim()){ // 有关键字
          this.listsalesByName(1)
        }else {  // 没有关键字, 则查询所有
          this.listsales(1)
        }
      },
      
      /** 分页器当前页码改变时执行 */
      changeCurrentPage(page){
        console.log(page)
        if(this.keyword.trim()){ // 有关键字  模糊查询分页
          this.listsalesByName(page)
        }else {// 没有关键字 加载显示相应页码的数据
          this.listsales(page) 
        }
      },

      /** 加载销售列表   page参数为页码 */
      listsales(page) {
        httpApi.saleApi.queryAll({page, pagesize:3}).then(res=>{
          console.log('销售列表数据', res)
          // 将res.data.data对象存入 this.saleData
          this.saleData = res.data.data
        })
      }
    },

    /** 页面挂载完毕后执行 */
    mounted () {
      this.listsales(1)
    },
  }
</script>

<style lang="scss" scoped>

</style>